<template>
  <sec-dialog
    width="520px"
    top="8vh"
    title="修改"
    :visible.sync="formVisible"
    :before-close="handleDialogClose"
    custom-class="device-detail-form"
  >
    <sec-form
      ref="formRef"
      :model="form"
      class="search-bar-form search-form-100 search-bar-form-bottom-16"
      label-width="80px"
      label-suffix=":"
      :rules="formRules"
    >
      <sec-form-item label="手机号" prop="accountMobile">
        <sec-input
          v-model="form.accountMobile"
          size="medium"
          placeholder=""
        ></sec-input>
      </sec-form-item>
      <sec-form-item label="邮箱" prop="accountMail">
        <sec-input
          v-model="form.accountMail"
          size="medium"
          placeholder=""
        ></sec-input>
      </sec-form-item>
    </sec-form>
    <span slot="footer" class="dialog-footer">
      <sec-button @click="handleDialogClose">取 消</sec-button>
      <sec-button type="primary" @click="submit">确 定</sec-button>
    </span>
  </sec-dialog>
</template>

<script>
import http from '@/utils/http'

export default {
  name: 'DeviceDetailForm',
  components: {},
  props: {
    formVisible: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        accountMail: '',
        accountMobile: ''
      },
      formRules: {
        accountMail: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        accountMobile: [
          {
            required: true,
            pattern: /^1([0-9][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    formVisible(val) {
      if (val) {
        this.form.accountMail = this.userInfo.accountMail
        this.form.accountMobile = this.userInfo.accountMobile
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleDialogClose() {
      this.form = {
        accountMail: '',
        accountMobile: ''
      }
      this.$refs['formRef'].resetFields()
      this.$emit('closeDetailForm')
    },
    submit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          http
            .accountUpdate({
              ...this.userInfo,
              ...this.form
            })
            .then((res) => {
              this.$message.success('修改成功')
              this.$emit('getInfo')
              this.handleDialogClose()
            })
        }
      })
    }
  }
}
</script>
<style lang="scss" scope></style>
